<template>
  <div class="latest-trade">
    <div class="headline">
      <span></span>最新调仓
    </div>
    <div v-if="false">{{testData}}</div>
    <table v-if="record.length > 0">
      <tbody>
      <tr>
        <td>
          <div class="text-md" :class="record[0].entrustBs == 1?'color-red':'color-blue2'">{{record[0].entrustBs == 1?"买单":"卖单"}}</div>
        </td>
        <td @click.stop.prevent="toStock" :data-stockCode="record[0].stockCode"
            :data-marketCode="record[0].marketCode">
          <i class="iconfont icon-gu"></i>
          <span class="stock_name">{{record[0].stockName}}</span>
          <div class="stock_code">{{record[0].marketCode}}{{record[0].stockCode}}</div>
        </td>
        <td>
          <div class="last_price" :class="record[0].entrustBs == 1?'color-red':'color-green'">{{record[0].entrustPrice}}</div>
          <div><span :class="record[0].entrustBs == 1?'color-red2':'color-blue2'">{{record[0].entrustBs == 1?"买入":"卖出"}}</span><span class="num_buy">{{record[0].entrustVol}}</span><span>股</span>
          </div>
        </td>
        <td>
          <div>
            <span class="entrust_date">{{record[0].entrustDate}}</span>
            <span>{{record[0].entrustTime}}</span>
          </div>
          <div>
            <span>{{record[0].positionOld}}%</span><i
            class="iconfont icon-jiantou"></i><span>{{record[0].positionNew}}%</span>
          </div>
        </td>
      </tr>
      <tr>
        <td></td>
        <td colspan="3" class="reasons">
          {{record[0].reason1Obj == null && record[0].reason2Obj == null && record[0].reason3Obj == null?'暂无调仓原因':'调仓原因'}}
          <span id="reason1Text" v-if="record[0].reason1Obj">
              <i class='iconfont' :class="record[0].reason1Obj.reasonIcon"></i>{{record[0].reason1Obj.reasonText}}
          </span>
          <span id="reason2Text" v-if="record[0].reason2Obj">
              <i class='iconfont' :class="record[0].reason2Obj.reasonIcon"></i>{{record[0].reason2Obj.reasonText}}
          </span>
          <span id="reason3Text" v-if="record[0].reason3Obj">
              <i class='iconfont' :class="record[0].reason3Obj.reasonIcon"></i>{{record[0].reason3Obj.reasonText}}
          </span>
        </td>
      </tr>
      <tr>
        <td colspan="4">
          <div class="button" v-if="record[0].entrustBs == 1"  @click.stop.prevent="toBuy">
            <i class="iconfont icon-mairu"></i>模拟买入
          </div>
        </td>
      </tr>
      </tbody>
    </table>

    <div class="placeholder" v-if="record.length == 0">
      <div class="content">
        <div class="tips" v-if="!error">哎呦，TA还没有<span class="">最新调仓</span>哦</div>
        <div class="tips" v-if="error">{{error}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import RemoteDAO from 'common/remoteDAO'
  import CommonUtil from 'common/common.util'
  import LocalDAO from 'common/localDAO'

  export default {
    data () {
      return {
        userCode: LocalDAO.getUserCode(),
        record: [],
        error: '',
        testData: 'testData'
      }
    },
    props: {
      clientId: {
        type: String
      }
    },
    watch: {
      '$route.query.userCode' (to, from) {
        //跳转相同页面，组件不重新构建，无法调用created,故需监听
        this.fetchData()
      }
    },
    created: function () {
      this.fetchData()
    },
    methods: {
      fetchData(){
        var self = this;
        RemoteDAO.callJCL11142(self.clientId, '', function (response) {
//          self.testData = JSON.stringify(response)
          if (Number(response.error) === 0) {
            if (response.data.body.record.length > 0) {
              var data = response.data.body.record[0];
              var record = [{}];
              record[0].exchangeType = data.exchange_type;
              record[0].stockCode = data.stock_code;
              record[0].marketCode = CommonUtil.getMarketCode(data.exchange_type);
              record[0].stockName = data.stock_name;
              record[0].entrustBs = data.entrust_bs;
              record[0].entrustBsText = (data.entrust_bs == 1 ? "买" : "卖");
              record[0].entrustPrice = CommonUtil.toFixed(data.entrust_price, 2);
              record[0].positionOld = CommonUtil.toFixed(data.position_old, 2);
              record[0].positionNew = CommonUtil.toFixed(data.position_new, 2);
              record[0].entrustVol = CommonUtil.toFixed(data.entrust_vol, 0);
              record[0].entrustTime = CommonUtil.formatHourMinute(data.entrust_time);
              if (data.entrust_date == CommonUtil.getTodayFormatDate()) {
                record[0].entrustDate = "今天";
              } else {
                record[0].entrustDate = CommonUtil.formatDatePoint(data.entrust_date);
              }
              record[0].reason1Obj = CommonUtil.getReasonOption(data.reason1);
              record[0].reason2Obj = CommonUtil.getReasonOption(data.reason2);
              record[0].reason3Obj = CommonUtil.getReasonOption(data.reason3);
              self.record = record;
            }
          } else {
            self.error = response.data;
          }
        });
      },
      toBuy(){
        this.$router.push({
          path: '/trade/buyin',
          query: {
            menuId: '1',
            stockCode: this.record[0].stockCode,
            stockName: this.record[0].stockName,
            marketCd: this.record[0].exchangeType,
            followClient: this.clientId
          }
        })
      },
      toStock(){
        RemoteDAO.callStockLive(this.record[0].marketCode + this.record[0].stockCode, "ordinary", "1", function () {
        });
      }
    }
  }
</script>

<style scoped>

</style>
